<template>
<div>
    <AutoQuery :query="query" :page="page"></AutoQuery>
    <Button type="success" style="float:right;" @click="handleAdd()" v-if="checkPermission('110711')">添加</Button>
    <AutoTable :columns="table.columns" :data="articleList" :page="page"></AutoTable>
    <Modal v-model="modal1" title="编辑文章" :width="80" :mask-closable="false" :scrollable="false">
        <InfoPost v-model="current_id" @on-add="handleModalAdd" @on-modify="handleModalModify" @on-cancel="handleModalCancel"></InfoPost>
        <div slot="footer"></div>
    </Modal>
</div>
</template>

<script>
import Page from "@/common/model/Page";
import AutoQuery from "@/common/components/AutoQuery";
import AutoTable from "@/common/components/AutoTable";
import Article from "@/common/model/Article";
import InfoPost from "./module_article_post";
import parent from "../Parent";

export default {
    extends:parent,
    components: {
        AutoQuery, AutoTable, InfoPost
    },
    data(){
        return{
            current_id: 0,
            modal1: false,
            page: new Page("search/article"), //分页查询接口
            query: { // 查询条件
                m_type: { type: "select", default: "*", options: [], onChange: value => {
                    var temp = [];
                    if(value != "*") {
                        var info_type = [];
                        var usual_service = this.$store.state.app.dicTree.usual_service.children;
                        for(var i = 0; i < usual_service.length; i++) {
                            if(usual_service[i].name == value) info_type = usual_service[i].children;
                        }
                        temp = info_type.filter( elem => elem.url == "#" ).map( elem => {
                            return { value: elem.name, label: elem.name };
                        });
                    }
                    this.query.p_type.options = [{ value: "*", label: "全部" }].concat(temp);
                    this.query.p_type.value = "*";
                } },
                p_type: { type: "select", default: "*", options: [] },
                search: { type: "input", placeholder: "按标题搜索" },
                begin_time: { type: "date", placeholder: "选择开始时间" },
                end_time: { type: "date", placeholder: "选择截止时间", handleValue: value => { return value + 24*60*60*1000 } },
            },
            table: {
                columns: [
                    {
                        title: '序号', width: 65, align: 'center', render: (h, params) => {
                            return h('div', (this.page.current_page - 1) * this.page.page_size + params.index + 1);
                        }
                    },
                    {
                        title: '标题', key: 'title'
                    },
                    {
                        title: '服务类别', width: 150, align: 'center', key: 'm_type'
                    },
                    {
                        title: '资讯类别', width: 150, align: 'center', key: 'p_type'
                    },
                    {
                        title: '发布日期', width: 150, align: 'center', key: 'create_time', sortable: "custom", render: (h, params) => {
                            return  h('div', params.row.formated_create_time);
                        }
                    },
                    {
                        title: '置顶', width: 100, align: 'center', key: 'is_top', sortable: "custom", render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: params.row.is_top ? 'info' : 'ghost', size: 'small' },
                                    style: { marginRight: '5px',display:this.showButton("110729") },
                                    on: { click: () => { this.handleTop(params.row) } }
                                }, params.row.is_top ? '取消置顶' : '置顶')
                            ]);
                        }
                    },
                    {
                        title: '操作', key: 'action', width: 200, align: 'center', render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px',display:this.showButton("110713") },
                                    on: { click: () => { this.handleEdit(params.row) } }
                                }, '修改'),
                                h('Button', {
                                    props: { type: params.row.status == 0 ? 'ghost' : 'info', size: 'small' },
                                    style: { marginRight: '5px',display:this.showButton("110719") },
                                    on: { click: () => { this.handleStatus(params.row) } }
                                }, params.row.status == 0 ? '已隐藏' : '已公开'),
                                h('Button', {
                                    props: { type: 'error', size: 'small' },
                                    style: { marginRight: '5px',display:this.showButton("110712") },
                                    on: { click: () => { this.handleDelete(params.row) } }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        }
    },
    computed:{
        articleList(){
            return Article.parseList(this.page.list);
        }
    },
    methods:{
        handleAdd() {
            this.current_id = 0;
            this.modal1 = true;
        },
        handleEdit(row) {
            this.current_id = row.id;
            this.modal1 = true;
        },
        handleModalAdd(elem) {
            this.page.current_page = 1;
            this.modal1 = false;
            this.page.getData();
        },
        handleModalModify(elem) {
            this.modal1 = false;
            this.page.getData();
        },
        handleModalCancel(elem){
            this.modal1 = false;
        },
        handleTop(row) {
            this.api.post("article/top", { id: row.id, status: 1 - row.is_top }, res => {
                this.page.getData();
            });
        },
        handleStatus(row) {
            this.api.post("article/status", { id: row.id, status: 1 - row.status }, res => {
                row.status = 1 - row.status;
            });
        },
        handleDelete(row) {
            if(!confirm("删除不可恢复，您确认要删除吗？")) return;
            this.api.post("article/delete", { id: row.id }, res => {
                this.page.getData();
            });
        }
    },
    created() {
        this.process("dic_tree", () => { // 在字典树成功获取到后更新类别选择框
            var temp = this.$store.state.app.dicTree.usual_service.children.filter( elem => elem.url == "#" ).map( elem => {
                return { value: elem.name, label: elem.name };
            });
            this.query.m_type.options = [{ value: "*", label: "全部" }].concat(temp);
        });
    }
};
</script>
